/**
 * CAROUSEL TRANSFORM
 */
.neo-carousel {
    /**
     * VARS
     */
    --neo-carousel-duration         : .7s;
    --neo-carousel-transition-timing: cubic-bezier(.4, 0, .2, 1);
    --neo-carousel-translate-x      : 0;
    --neo-carousel-translate-y      : 0;

    .neo-carousel-inner {
        overflow: hidden;
        position: relative;

        .neo-carousel-item {
            inset                     : 0;
            position                  : absolute;
            transform                 : translate(var(--neo-carousel-translate-x), var(--neo-carousel-translate-y));
            transition-duration       : var(--neo-carousel-duration);
            transition-property       : all;
            transition-timing-function: var(--neo-carousel-transition-timing);
            z-index                   : 10;
        }
    }
}

.neo-carousel--translate-x-full {
    --neo-carousel-translate-x: -100%;

    transform: translate(var(--neo-carousel-translate-x), var(--neo-carousel-translate-y));
}

.neo-carousel-translate-x-0 {
    --neo-carousel-translate-x: 0;

    transform: translate(var(--neo-carousel-translate-x), var(--neo-carousel-translate-y));
}

.neo-carousel-translate-x-full {
    --neo-carousel-translate-x: 100%;

    transform: translate(var(--neo-carousel-translate-x), var(--neo-carousel-translate-y));
}

/**
 * BASE STYLING
 */
.neo-carousel {
    background: var(--container-background-color);
    height    : 14rem;
    padding   : 15px;

    .neo-carousel-btn-bar {
        text-align: end;

        .neo-carousel-btn {
            font-size: 18px;
            padding  : 15px;
        }
    }

    .neo-carousel-inner {
        background-color: var(--button-text-color-active);
        border-radius   : 5px;
        color           : var(--button-background-color);
        height          : 9rem;
        overflow        : hidden;

        &:before {
            content: '';
            position: absolute;
            background: linear-gradient(90deg, var(--button-text-color-active) 0%, var(--button-text-color-active) 50%, rgba(0, 0, 0, 0) 100%);
            top: 0;
            bottom: 0;
            left: 0;
            width: 30px;
            z-index: 11;
        }
        &:after {
            content: '';
            position: absolute;
            background: linear-gradient(270deg, var(--button-text-color-active) 0%, var(--button-text-color-active) 50%, rgba(0, 0, 0, 0) 100%);
            top: 0;
            bottom: 0;
            right: 0;
            width: 30px;
            z-index: 11;
        }
        .neo-carousel-item {
            height : 9rem;
            padding: 15px;
            text-align: center;
        }
    }
}
